<template>
  <div>
    <h1 :style="{ opacity: count }">🐕</h1>
    <button @click="delteC">毁灭吧</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
      timer: null,
    };
  },
  //挂载阶段后
  mounted() {
    this.timer = setInterval(() => {
      this.count -= 0.1;
      // 因为js计算不准确性 所以在这里判断为<=0.1
      if (this.count <= 0.1) {
        this.count = 1;
      }
      console.log("计时器");
      /* 
       当我们在销毁一个实例的时候发现计时器还在运行
       关于摧毁的事件是自定义事件  原生DOM事件还在
      */
    }, 300);
  },
  methods: {
    delteC() {
      /* 
      完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

      触发 beforeDestroy 和 destroyed 的钩子。
      */
      this.$destroy();
    },
  },
  //在摧毁前的生命周期函数
  beforeDestroy() {
    console.log(this, "this");
    clearInterval(this.timer);
    /* 
      此时：vm中所有的：
      data、methods、指令等等，都处于可用状态，马上要执行销毁过程，
      一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作  
    */
  },
};
</script>

<style></style>
